<!-- <script setup>

</script>

<template>
order
</template>

<style scoped>

</style> -->
<template>
    <div class="order-management">
      <!-- 筛选和操作区 -->
      <div class="filter-container">
        <el-form :model="queryParams" inline>
          <el-form-item label="订单号">
            <el-input
              v-model="queryParams.orderNo"
              placeholder="请输入订单号"
              clearable
            />
          </el-form-item>
  
          <el-form-item label="用户名称">
            <el-input
              v-model="queryParams.username"
              placeholder="请输入用户名称"
              clearable
            />
          </el-form-item>
  
          <el-form-item label="订单状态" style="width: 300px;">
            <el-select
              v-model="queryParams.status"
              placeholder="全部状态"
              clearable
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
  
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="queryParams.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <!-- 统计卡片 -->
      <el-row :gutter="20" class="mb-4">
        <el-col :span="6">
          <stat-card
            title="今日订单"
            :value="stats.todayOrders"
            icon="el-icon-s-order"
            color="#409EFF"
            suffix="笔"
          />
        </el-col>
        <el-col :span="6">
          <stat-card
            title="待发货"
            :value="stats.pendingDelivery"
            icon="el-icon-truck"
            color="#E6A23C"
            suffix="笔"
          />
        </el-col>
        <el-col :span="6">
          <stat-card
            title="已取消"
            :value="stats.canceled"
            icon="el-icon-close"
            color="#F56C6C"
            suffix="笔"
          />
        </el-col>
        <el-col :span="6">
          <stat-card
            title="总金额"
            :value="stats.totalAmount"
            icon="el-icon-money"
            color="#67C23A"
            prefix="¥"
          />
        </el-col>
      </el-row>
  
      <!-- 订单表格 -->
      <el-table
        :data="orderList"
        border
        stripe
        v-loading="loading"
        @sort-change="handleSort"
      >
        <el-table-column type="selection" width="55" />
        
        <el-table-column
          prop="orderNo"
          label="订单号"
          width="200"
          sortable="custom"
        />
        
        <el-table-column label="用户信息" width="180">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar :size="30" :src="row.user.avatar" />
              <div class="user-detail">
                <div>{{ row.user.name }}</div>
                <div class="text-muted">{{ row.user.phone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
  
        <el-table-column label="商品信息">
          <template #default="{ row }">
            <div class="product-list">
              <div v-for="item in row.products" :key="item.id" class="product-item">
                <el-image
                  :src="item.image"
                  :preview-src-list="[item.image]"
                  fit="cover"
                  class="product-image"
                />
                <div class="product-info">
                  <div class="product-name">{{ item.name }}</div>
                  <div class="text-muted">x{{ item.quantity }}</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
  
        <el-table-column prop="totalAmount" label="金额" width="120" sortable="custom">
          <template #default="{ row }">¥{{ row.totalAmount }}</template>
        </el-table-column>
  
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="statusTagType[row.status]">
              {{ statusMap[row.status] }}
            </el-tag>
          </template>
        </el-table-column>
  
        <el-table-column prop="createTime" label="下单时间" width="180" sortable="custom" />
  
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="handleDetail(row)">详情</el-button>
            <el-dropdown>
              <el-button size="small">
                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleEdit(row)">编辑</el-dropdown-item>
                  <el-dropdown-item 
                    v-if="row.status === 1"
                    @click="handleCancel(row)"
                  >
                    取消订单
                  </el-dropdown-item>
                  <el-dropdown-item 
                    v-if="row.status === 2"
                    @click="handleDeliver(row)"
                  >
                    发货
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleDelete(row)">
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        class="mt-4"
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.limit"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
  
      <!-- 订单详情弹窗 -->
      <order-detail-dialog
        v-model="detailVisible"
        :order-id="currentOrderId"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed } from 'vue'
  import { ArrowDown } from '@element-plus/icons-vue'
//   import OrderDetailDialog from './OrderDetailDialog.vue'
  // import StatCard from './components/StatCard.vue'
  
  // 订单状态配置
  const statusOptions = [
    { value: 1, label: '待付款' },
    { value: 2, label: '待发货' },
    { value: 3, label: '已发货' },
    { value: 4, label: '已完成' },
    { value: 0, label: '已取消' }
  ]
  
  const statusMap = {
    0: '已取消',
    1: '待付款',
    2: '待发货',
    3: '已发货',
    4: '已完成'
  }
  
  const statusTagType = {
    0: 'danger',
    1: 'warning',
    2: 'primary',
    3: 'info',
    4: 'success'
  }
  
  // 查询参数
  const queryParams = reactive({
    page: 1,
    limit: 10,
    orderNo: '',
    username: '',
    status: null,
    dateRange: [],
    sortField: '',
    sortOrder: ''
  })
  
  // 模拟数据
  const orderList = ref([
    {
      id: 1,
      orderNo: '202308010001',
      user: {
        name: '张三',
        phone: '13800138000',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      },
      products: [
        {
          id: 101,
          name: '商品A',
          image: 'https://dummyimage.com/100x100',
          price: 99.9,
          quantity: 2
        }
      ],
      totalAmount: 199.8,
      status: 2,
      createTime: '2023-08-01 10:00:00'
    }
  ])
  
  const total = ref(100)
  const loading = ref(false)
  const detailVisible = ref(false)
  const currentOrderId = ref(null)
  
  // 统计卡片数据
  const stats = reactive({
    todayOrders: 42,
    pendingDelivery: 15,
    canceled: 5,
    totalAmount: 8848.0
  })
  
  // 处理方法
  const handleSearch = () => {
    // 调用接口查询
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  
  const handleReset = () => {
    Object.assign(queryParams, {
      page: 1,
      limit: 10,
      orderNo: '',
      username: '',
      status: null,
      dateRange: [],
      sortField: '',
      sortOrder: ''
    })
  }
  
  const handleDetail = (row) => {
    currentOrderId.value = row.id
    detailVisible.value = true
  }
  
  const handleCancel = (row) => {
    ElMessageBox.confirm('确定要取消该订单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 调用取消接口
      ElMessage.success('订单已取消')
    })
  }
  
  // 其他操作方法...
  </script>
  
  <style scoped>
  .filter-container {
    padding: 20px;
    background: #fff;
    margin-bottom: 20px;
    border-radius: 4px;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    .user-detail {
      margin-left: 10px;
      line-height: 1.4;
    }
  }
  
  .product-list {
    .product-item {
      display: flex;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
    }
    .product-image {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .product-name {
      margin-bottom: 4px;
    }
  }
  
  .text-muted {
    color: #999;
    font-size: 12px;
  }
  </style>